图片懒加载jq版
一. 引入jq文件
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
二. 引入jq代码
<script type="text/javascript">
//调用
visibleImgLazyload();
//触发滚动 防止第一屏不加载
$("body,html").scrollTop(1);
/**
* 可视区域 img 加载
*/
function visibleImgLazyload() {
//当前窗口高度
var winHeight = $(window).height();
//整个文档高度
var bodyHeight = $(document).height();
//如果图片不满屏，直接加载
if(bodyHeight <= winHeight) {
$("img").each(function() {
var $this = $(this);
if($this.attr("data-url") != $this.attr("src")) {
//如果为空，src设置为data-src
if($this.attr("data-src")) {
$this.attr("src", $this.attr("data-src"));
} else {
$this.attr("data-src", $this.attr("src"));
}
}
});
} else {
//容差值 预加载上下100像素内的图片
var phase = 100;
$(document).on("scroll", function(e) {
$("img").each(function() {
var $this = $(this);
//窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
//屏幕顶部距离最顶部的高度 减去图片高度，上拉时也会点到图片就加载
var thisTop = parseInt($(window).scrollTop()) - parseInt($this.height());
var imgTop = parseInt($this.offset().top);
if(imgTop >= thisTop - phase && imgTop <= thisButtomTop + phase && $this.attr("data-url") != $this.attr("src")) {
//如果为空，src设置为data-src
if($this.attr("data-src")) {
$this.attr("src", $this.attr("data-src"));
} else {
$this.attr("data-src", $this.attr("src"));
}
}
});
});
}
}
</script>
用法比较简单 给图片地址赋给data-src，注意图片src不用为空。。。